@import "variables";

#archive-page {

  .archive {
    position: relative;
    padding: 20px;

    .archive-item {
      position: relative;

      a {
        display: inline-block;
        padding: 3px 15px;
        border-left: 3px solid transparent;
        background: transparent;
        transition: all ease 0.24s;

        @media (prefers-color-scheme: dark) {
          color: $dark-mode-text-color;
        }
        &:hover {
          border-left-color: lighten($brand-color, 10%);
          background-color: lighten($background-color, 2%);

          @media (prefers-color-scheme: dark) {
            border-left-color: lighten($dark-mode-brand-color, 10%);
            background-color: darken($dark-mode-light-background, 5%);
          }
        }
      }
    }
    .archive-year {
      font-size: 16px;
      margin: 10px 0;
    }
    .archive-post {
      time {
        font-size: 12px;
        padding-right: 10px;
      }
      .title {
        font-size: 14px;
        color: $brand-color;

        @media (prefers-color-scheme: dark) {
          color: $dark-mode-brand-color;
        }
      }
    }
  }
}